<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-show="!loadingone">
			<navbar :name="navTitle"></navbar>
			<view class="topbg">
				<view class="unicorn-view">
					<view class="user-image">
						<image style="width: 100%;height: 100%;" :src="result.avatarUrl" mode="头像"></image>
					</view>
					<view class="user-nameview">
						<view class="user-name ellipsis">
							{{result.nickName}}
						</view>
						<view class="user-text ellipsis">
							<!-- 房价松动拉风的撒里的撒房间里大叔控飞机开绿灯撒房间里肯定撒弗利卡式的发送大量看是的立法楼上的发 -->
							{{result.remark?result.remark:''}}
						</view>
						<view class="uese-list">
							<view class="message" @tap="navTap('fans')">
								<view class="title">
									{{result.fansCount}}
								</view>
								粉丝
							</view>
							<view class="message" @tap="navTap('follow')">
								<view class="title">
									{{result.focusCount}}
								</view>
								关注
							</view>
							<view class="message" @tap="navTap('fabulous')">
								<view class="title">
									{{result.upvoteCount}}
								</view>
								获赞
							</view>
						</view>
					</view>
					<!-- <view class="star-view">
						<uni-icons color="red" size="20" type="star-filled" />
					</view> -->
					<view class="attention-box" v-show="result.followFlag==0" @tap="follow">
						+ 关注
					</view>
					<view class="attention-boxno" v-show="result.followFlag==1" @tap="DeleteFollow">
						已关注
					</view>
				</view>
			</view>
			<!-- 瀑布流圈子 -->
			<!-- <view class="" style="margin-top: -50rpx;">
				<circle :leftList="leftList" :rightList="rightList" @collectTap="collectTap2"></circle>
			</view> -->
			<view>
				<view class="waterfall-box h-flex-x h-flex-2">
					<view>
						<helang-waterfall
							v-for="(item,index) in leftList"
							:key="index"
							:params="item"
							tag="left"
							:index="index"
							@height="onHeight"
							@click="onClick"
							@collectTap="collectTap2"
						></helang-waterfall>
					</view>
					<view>
						<helang-waterfall
							v-for="(item,index) in rightList"
							:key="index"
							:params="item"
							@height="onHeight"
							@click="onClick"
							tag="right"
							:index="index"
							@collectTap="collectTap2"
						></helang-waterfall>
					</view>
				</view>
				<view class="load-txt">{{ajax.loadTxt}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import circle from "@/components/circle/circle"
	import helangWaterfall from "@/components/helang-waterfall/helang-waterfall"
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

	export default {
		components: {
			uLoading,
			circle,
			"helang-waterfall": helangWaterfall
		},
		data() {
			return {
				draft:false,
				// 按照高度加载瀑布流
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					rows:4,
					// 页码
					page:1,
				},
				// end


				navTitle:'',
				hisUserId: '',
				loadingone: false, //懒加载动画
				leftList: [],
				rightList: [],
				pageCurrent: 1,
				pageSize: 4,
				result: {
					fansCount:0,
					focusCount:0,
					upvoteCount:0,
					nickName:''
				},
				flowList: [],
				list: [],
			}
		},
		onLoad(e) {
			e.hisUserId =e.hisUserId !=undefined? e.hisUserId : ''
			this.hisUserId = e.hisUserId;
			let navTitle;
			this.draft = e.draft;
			if(e.draft){//草稿箱
				navTitle = '草稿箱'
				this.getUserForumList(0,this.pageCurrent,this.pageSize)
			}else{
				navTitle = e.hisUserId!=''?'他的主页':'我的主页'
				if(e.hisUserId!=''){//他的主页
					this.getUserForumList(1,this.pageCurrent,this.pageSize)
				}else{//我的主页
					this.getUserForumListcg(0, 1, 10)
				}
			}
			this.navTitle = navTitle;
			this.upvoteRecord();
			uni.$on('toUpdateFabulous',this.toUpdateFabulous)//联动点赞
			uni.$on('getUserForumListRefresh',this.getUserForumListRefresh)//草稿箱发帖
		},
		onUnload() {//页面卸载
			uni.$off('toUpdateFabulous', this.toUpdateFabulous)
			uni.$off('getUserForumListRefresh', this.getUserForumListRefresh)
		},
		methods: {
			// 按照高度加载瀑布流
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			// 组件点击事件
			onClick(index, tag,item){
				console.log(index, tag,item);
				// 对应的数据
				if(tag == 'left'){
					console.log(this.leftList[index]);
				}else{
					console.log(this.rightList[index]);
				}
			},
			addList(res) {
				// 获取到的数据，请注意数据结构
				console.log(res);

				if(!res || res.length < 1){
					this.ajax.loadTxt = '没有更多了';
					return;
				}

				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;

				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;

				let [left, right] = [
					[],
					[]
				];


				// 获取插入的方向
				let getDirection = (index)=>{
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if(differ>= 600 && index < 3){
						differVal = 1;
						return 'right';
					}

					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if(differ <= -600 && index < 3){
						differVal = -1;
						return 'left';
					}

					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if(differ >= 350 && index < 2){
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if(differ <= -350 && index < 2){
						differVal = -1;
						return 'left';
					}

					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i+differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}

				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if(getDirection(index) == 'left'){
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					}else{
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});

				// 将左右列表的数据插入，第一页时则覆盖
				if(this.ajax.page == 1){
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				}else{
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}

				this.ajax.load = true;
				this.ajax.loadTxt = '上拉加载更多';
				this.ajax.page++;
			},
			// end


			getUserForumListcg(auditStatus, pageCurrent, pageSize){
				let _this = this;
				this.$cms.get(global.apiUrls.getUserForumList + '?auditStatus=' + auditStatus + '&keyword=&pageCurrent=' +
						pageCurrent +
						'&pageSize=' + pageSize + '&releaseTime=&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId +
						'&hisUserId='+'', {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							if(auditStatus==0&&records.length >= 1){
								console.log(records[0],104)
								records[0].draft = true
								_this.getUserForumList(1,_this.pageCurrent,_this.pageSize,records[0])
							}else{
								_this.getUserForumList(1,_this.pageCurrent,_this.pageSize,records[0])
							}
							// let records = res.data.result.records; //文章
							// _this.addRandomData(records)
						}
					}).catch(err => {})
			},
			getUserForumListRefresh(){
				this.leftList = [];
				this.rightList = [];
				this.getUserForumList(1, this.pageCurrent, this.pageSize)
			},
			toUpdateFabulous(data){//点赞更新
				let type = data.type,//当前type
				index = parseInt(data.index);//index
				if(type == 'left'){
					if(data.deleteForum){//删除
					this.ajax.page = 1;
					this.leftHeight = 0;
					this.rightHeight = 0;
					this.leftList = [];
					this.rightList = [];
					this.getUserForumListcg(0, 1, 10)
					}else{//点赞
						this.leftList[index].upvoteNum = data.upvoteNum
					}
				}else if(type == 'right'){
					if(data.deleteForum){//删除
					this.ajax.page = 1;
					this.leftHeight = 0;
					this.rightHeight = 0;
					this.leftList = [];
					this.rightList = [];
					this.getUserForumListcg(0, 1, 10)
					}else{
						this.rightList[index].upvoteNum = data.upvoteNum
					}
				}
			},
			// 取关
			DeleteFollow() {
				let _this = this,
					fdata = {
						followedId: _this.hisUserId, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.delete(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '取关成功',
							duration: 2000
						});

						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 1000);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},

			//关注
			follow() {
				let _this = this,
					fdata = {
						followedId: _this.hisUserId, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.post(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '关注成功',
							duration: 2000
						});
						this.upvoteRecord();
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},

			navTap(type) {
				let url = '';
				if (type == 'fans') { //粉丝
					url = '/pagesMy/my/beanvermicelli/beanvermicelli'
				} else if (type == 'follow') { //关注
					url = '/pagesMy/my/myinterest/myinterest'
				} else if (type == 'fabulous') { //点赞

				}
				// 跳转页面
				uni.navigateTo({
					url: url + '?hisUserId=' + this.hisUserId
				})
			},
			collectTap2(item) {
				if(item.item.draft){
					uni.navigateTo({
						url:'/pagesMy/my/homepage/homepageCg?draft='+item.item.draft
					})
				}else if(item.item.auditStatus === 0){
					uni.setStorageSync('postAmessage',{
						html:item.item.forumContent,
						titleValue:item.item.forumTitle
					})
					this.$urouter.navigateTo({
						url: '/pages/subpackage/find/postAmessage/postAmessage',
						params: {
							forumId:item.item.forumId,
						}
					});
				}else{
					uni.navigateTo({
						url: '/pages/subpackage/find/share/share?forumId=' + item.item.forumId+'&index='+item.index+'&type='+item.type
					})
				}

			},
			getUserForumList(auditStatus, pageCurrent, pageSize,draftData) {
				let _this = this;
				this.$cms.get(global.apiUrls.getUserForumList + '?auditStatus=' + auditStatus + '&keyword=&pageCurrent=' +
						pageCurrent +
						'&pageSize=' + pageSize + '&releaseTime=&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId +
						'&hisUserId=' + this.hisUserId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records; //帖子
							console.log(records,'42000000000')
							// if(records.length)
							if(draftData){
								records.unshift(draftData)
							}
							_this.addList(records)
							// _this.addRandomData(records)
						}
					}).catch(err => {})
			},
			upvoteRecord() {
				let _this = this;
				this.loadingone = true;
				this.$cms.get(global.apiUrls.upvoteRecord + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId +
						'&hisUserId=' + this.hisUserId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							_this.result = result
							// _this.fansCount = result.fansCount
							// _this.focusCount = result.focusCount
							// _this.upvoteCount = result.upvoteCount
						}
						_this.loadingone = false;
					}).catch(err => {})
			},
			addRandomData(list) {
				// if(this.leftList.length>=1){
				// 	this.leftList =this.leftList.concat(list)
				// }else{
				// 	this.leftList = list
				// }
					let leftList = [],
						rightList = [];
					for (let i = 0; i < list.length; i++) {
						let item = list[i];
						console.log(item, 230)
						if (i % 2 == 0) {
							leftList.push(item)
						} else {
							rightList.push(item)
						}
					}
					this.leftList = this.leftList.length == 0 ? leftList : this.leftList.concat(leftList);
					this.rightList = this.rightList.length == 0 ? rightList : this.rightList.concat(rightList);
			},
			onReachBottom: function() { //分页加载
				this.getUserForumList(1, this.pageCurrent += 1, this.pageSize)
				// this.getList();
				// this.getCouponPageByWid(this.current+1,this.pageCurrent+=1,this.pageSize)
			},
		}

	}
</script>

<style lang="scss">
	.topbg {
		width: 750upx;
		height: 245upx;
		background: url(https://bsyjk-pic.bsyjk.cn/toprbg/10099E8526734AC383D6ADEED897F016.png)no-repeat;
		background-size: 750upx 245upx;
		padding-top: 30upx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 60upx;
	}

	.unicorn-view {
		width: 718upx;
		height: 244upx;
		background: #FFFFFF;
		box-shadow: 0px 2upx 20upx 0px rgba(173, 173, 173, 0.25);
		border-radius: 30upx;
		margin: 0 auto;
		padding: 30upx 22upx 50upx;
		box-sizing: border-box;
		display: flex;
		position: relative;

		.attention-box {
			width: 130upx;
			height: 50upx;
			line-height: 50upx;
			color: #FFFFFF;
			border-radius: 14upx;
			background-color: #FF930A;
			text-align: center;
			font-size: 24upx;
			font-family: PingFangSC-Medium, PingFang SC;
			position: absolute;
			right: 20upx;
			top: 20upx;
		}

		.attention-boxno {
			width: 130upx;
			height: 50upx;
			line-height: 50upx;
			color: #FFFFFF;
			border-radius: 14upx;
			background-color: #9B9B9B;
			text-align: center;
			font-size: 24upx;
			font-family: PingFangSC-Medium, PingFang SC;
			position: absolute;
			right: 20upx;
			top: 20upx;
		}


		.user-image {
			width: 164upx;
			height: 164upx;
			border-radius: 50%;
			overflow: hidden;
		}

		.user-nameview {
			width: 450upx;
			padding-left: 35upx;

			.uese-list {
				padding-top: 16upx;
				width: 100%;
				display: flex;
				margin-left: -20upx;
				font-size: 28upx;
				font-weight: 400;
				color: #818181;

				.message {
					width: 106upx;
					text-align: center;

					.title {
						color: #050505;
					}
				}
			}

			.user-name {
				font-size: 30upx;
				font-weight: 400;
				color: #111111;
				line-height: 42upx;
			}

			.user-text {
				height: 50upx;
				font-size: 24upx;
				font-weight: 400;
				color: #9B9B9B;
				margin-top: 10upx;
			}
		}
	}

	// 瀑布流
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-img-wrap {}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
		word-break: break-all;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.pullbl {
		width: 730upx;
		margin: 14upx auto 0;

		.pbllimagr {

			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
		}

		.pbllimag {

			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
		}
	}

	.lad-image {
		width: 32upx;
		height: 32upx;
		display: block;
		float: left;
		margin-right: 10upx;
	}

	.lad-image {
		width: 32upx;
		height: 32upx;
		border-radius: 50%;
		display: block;
		float: left;
		margin-right: 10upx;
	}
</style>
